<template>
  <div :class="className" :style="{height:height,width:width,}" />
</template>

<script>
    import echarts from 'echarts'
    require('echarts/theme/macarons') // echarts theme
    import resize from '../archives/medicalcheckup/components/mixins/resize'

    export default {
        mixins: [resize],
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '300px'
            },
            checkInMarkCount:{
                type:Number,

            },
            destineCount:{
                type:Number,
            },
            leisureBedCount:{
                type:Number,
            },
            receptionCount:{
                type:Number,
            },
        },
        data() {
            return {
                chart: null
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.initChart()
            })
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null
        },
        methods: {
            initChart() {
                this.chart = echarts.init(this.$el, 'macarons')

                this.chart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {

                        left: '450px',
                        orient: 'vertical',  //垂直显示
                        y: '60px',    //延Y轴居中
                        x: 'right', //居右显示
                        textStyle: { //图例文字的样式
                            color: '#fff',
                            fontSize: 14,
                            lineHeight:20
                        },

                        data: ['在院人数', '咨询人数', '预约人数','空闲床位' ]
                    },
                    series: [
                        {
                            name: '机构统计',
                            type: 'pie',
                            roseType: 'radius',
                            radius: [30, 85],
                            center: ['30%', '41%'],
                            data: [
                                { value: this.leisureBedCount, name: '空闲床位' },
                                { value: this.destineCount, name: '咨询人数' },
                                { value: this.checkInMarkCount, name: '在院人数' },
                                { value: this.receptionCount, name: '预约人数' },


                            ],
                            animationEasing: 'cubicInOut',
                            animationDuration: 2600
                        }
                    ]
                })
            }
        }
    }
</script>
